<<<<<<< HEAD
<template>	
	<div class="recommend">
		<div class="wrapper" ref="wrapper">
			<div class="slider-wrapper">
				<slider>
		            <div v-for="item in recommends">
		              <a :href="item.linkUrl">
		                <img @aaload="loaded" :src="item.picUrl">
		              </a>
		            </div>
		        </slider>
		        <div class="recommend-list">
		        	<h1 class="list-title">热门歌单推荐</h1>
		        	<ul>
	                  <li v-for="item in discList" class="item">
	                    <div class="icon">
	                      <img width="60" height="60" v-lazy="item.imgurl" alt="">
	                    </div>
	                    <div class="text">
	                      <h2 class="name" v-html="item.creator.name"></h2>
	                      <p class="desc" v-html="item.dissname"></p>
	                    </div>
	                  </li>
	                </ul>
		        </div>	
	        </div>
	    </div>
	</div>
</template> 

<script>
	import BScroll from 'better-scroll'
	import {getRecommend,getDiscList} from 'api/recommend' 
	import Slider from 'base/slider/slider'

	export default{
		data(){
			return {
				recommends:[],
				discList:[]
			}
		},
		created(){
			this._getRecommend()
			this._getDiscList()
		},
		mounted(){
			this._initScroll()
			// console.log(this)
		},
		methods:{
			_getRecommend(){
				getRecommend().then((res)=>{
					if (res.code === 0) {
						this.recommends = res.data.slider;
					}
				})
			},
		     _getDiscList(){
		        getDiscList().then((res) => {
		          this.discList = res.data.list;
		        })
		    },
		    _initScroll(){
		    	this.Scroll = new BScroll(this.$refs.wrapper,{
		    		probeType:1,
		    		click:true
		    	})
		    },
		    loaded(){
		    	if(!this.isloaded){
		    		this.isloaded = true;
		    		this.Sroll.refresh();
		    	}
		    }
		},
		components:{
			Slider
		}
	}
</script> 

<style scoped lang="less">
	@import "~assets/less/variable";

	.recommend{
		position: fixed;
		width: 100%;
	    top: 88px;
	    bottom: 0;
	    .wrapper{
	      height: 100%;
	      overflow: hidden;
		    .slider-wrapper {
	          position: relative;
	          width: 100%;
	          overflow: hidden;
	        }
	        .recommend-list {
	            .list-title {
					height: 65px;
					line-height: 65px;
					text-align: center;
					font-size: @font-size-medium;
					color: @color-theme;
				}
				.item{
					display: flex;
					box-sizing: border-box;
					align-items: center;
					padding: 0 20px 20px 20px;
					.icon{
					width: 60px;
					padding-right: 20px;
					}
					.text{
					display: flex;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					line-height: 20px;
					overflow: hidden;
					text-align: left;
					font-size: @font-size-medium;
						.name{
							margin-bottom: 10px;
							color: @color-text;
						}
						.desc{
						  color: @color-text-d;
						}
					}
				}
	        }  
	    }
	}
=======
<template>
  <div class="recommend" ref="recommend">
    <div class="wrapper" ref="wrapper">
      <div>
        <div v-if="recommends.length" class="slider-wrapper">
            <slider>
                <div v-for="item in recommends">
                  <a :href="item.linkUrl">
                    <img @load="loaded" :src="item.picUrl">
                  </a>
                </div>
            </slider>
            <div class="recommend-list">
                <h1 class="list-title">热门歌单推荐</h1>
                <ul>
                  <li v-for="item in discList" class="item">
                    <div class="icon">
                      <img width="60" height="60" v-lazy="item.imgurl" alt="">
                    </div>
                    <div class="text">
                      <h2 class="name" v-html="item.creator.name"></h2>
                      <p class="desc" v-html="item.dissname"></p>
                    </div>
                  </li>
                </ul>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getRecommend,getDiscList} from 'api/recommend'
  import Slider from 'base/slider/slider'
  import BScroll from 'better-scroll'

  export default {
   	data(){
   		return {
   			recommends:[],
        discList:[]
   		}
   	},
   	created(){
   		this._getRecommend()
      this._getDiscList()
   	},
    mounted(){
      this._initScroll()
    },
   	methods:{
	  	_getRecommend(){
	  		getRecommend().then((res)=>{
	  			if(res.code === 0){
	  				this.recommends = res.data.slider;
	  			}
	  		})
	  	},
      _getDiscList(){
        getDiscList().then((res) => {
          // console.log(res.data.list)
          this.discList = res.data.list
        })
      },
      _initScroll(){
        if(!this.$refs.wrapper){
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper,{
          click:true,
          probeType:1
        })
      },
      loaded(){
        if(!this.isloaded){
          this.isloaded = true
          this.scroll.refresh()
        }
      }
   	},
    components:{
      Slider
    },
    watch:{
      discList(){
        setTimeout(()=>{
          console.log(123)
          this.scroll.refresh()
        },20)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "~assets/less/variable";
  .recommend {
      position: fixed;
      width: 100%;
      top: 88px;
      bottom: 0;
      .wrapper{
        height: 100%;
        overflow: hidden;
        .slider-wrapper {
          position: relative;
          width: 100%;
          overflow: hidden;
          .recommend-list {
            .list-title {
              height: 65px;
              line-height: 65px;
              text-align: center;
              font-size: @font-size-medium;
              color: @color-theme;
            }
            .item{
              display: flex;
              box-sizing: border-box;
              align-items: center;
              padding: 0 20px 20px 20px;
              .icon{
                width: 60px;
                padding-right: 20px;
              }
              .text{
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
                line-height: 20px;
                overflow: hidden;
                text-align: left;
                font-size: @font-size-medium;
                .name{
                  margin-bottom: 10px;
                  color: @color-text;
                }
                .desc{
                  color: @color-text-d;
                }
              }
            }
          }
        }
      }
  }
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
</style>